<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>郭大爷的Deepseek</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; background-color: #121212; color: #ffffff; }
        #chat-container { width: 60%; margin: auto; padding: 20px; }
        #chat-box { height: 400px; border: 1px solid #ccc; border-radius: 10px; padding: 10px; overflow-y: auto; background: #1e1e1e; color: white; display: flex; flex-direction: column; }
        .message { padding: 10px; border-radius: 10px; max-width: 75%; margin: 5px 0; }
        .user-msg { background-color: #007bff; color: white; align-self: flex-end; text-align: right; }
        .ai-msg { background-color: #28a745; color: white; align-self: flex-start; text-align: left; }
        .ai-think { font-size: 0.9em; color: gray; cursor: pointer; }
        .loading { display: none; font-size: 20px; text-align: center; }
        .hidden { display: none; }
        footer { margin-top: 20px; padding: 20px; text-align: center; background: #222; color: white; }
    </style>
</head>
<body>
    <h2 class="mt-4 text-center">郭大爷的Deepseek</h2>
    <div id="chat-container">
        <div id="chat-box" class="p-3"></div>
        <div id="loading" class="loading">
            <span class="spinner-border text-primary" role="status"></span> AI 正在思考...
        </div>
        <input type="text" id="user-input" class="form-control mt-3" placeholder="输入你的问题..." />
        <button class="btn btn-primary mt-2" onclick="sendMessage()">发送</button>
        <button class="btn btn-danger mt-2 hidden" id="cancel-btn" onclick="cancelStream()">取消生成</button>
    </div>

    <script>
        let eventSource = null;

        async function sendMessage() {
            let inputField = document.getElementById("user-input");
            let message = inputField.value.trim();
            if (!message) return;

            let chatBox = document.getElementById("chat-box");
            chatBox.innerHTML += `<div class="message user-msg">你: ${message}</div>`;
            inputField.value = "";

            document.getElementById("loading").style.display = "block";
            document.getElementById("cancel-btn").classList.remove("hidden");

            let aiContainer = document.createElement("div");
            aiContainer.classList.add("message", "ai-msg");
            chatBox.appendChild(aiContainer);

            eventSource = new EventSource(`/chat?message=${encodeURIComponent(message)}`);

            let aiText = "";  // 存储完整 AI 回复
            eventSource.onmessage = function (event) {
                aiText += event.data;  // 追加文本
                aiContainer.innerHTML = formatResponse(aiText);
                chatBox.scrollTo({ top: chatBox.scrollHeight, behavior: "smooth" });
            };

            eventSource.onerror = function () {
                eventSource.close();
                document.getElementById("loading").style.display = "none";
                document.getElementById("cancel-btn").classList.add("hidden");
                inputField.disabled = false;
            };
        }

        function cancelStream() {
            if (eventSource) {
                eventSource.close();
                document.getElementById("loading").style.display = "none";
                document.getElementById("cancel-btn").classList.add("hidden");
            }
        }

        function formatResponse(response) {
            let thinkMatch = response.match(/<think>(.*?)<\/think>/s);
            let thinkContent = thinkMatch ? thinkMatch[1].trim() : "";
            response = response.replace(/<think>.*?<\/think>/s, ""); // 删除思考部分

            response = response.replace(/\\\[|\]/g, "").replace(/\\\(/g, "").replace(/\\\)/g, "").replace(/\\boxed{([^}]*)}/g, "**$1**");

            let formattedHtml = `
                <details class="ai-think">
                    <summary>🔍 思考（点击展开）</summary>
                    <p>${thinkContent}</p>
                </details>
                <p>${marked.parse(response)}</p>
            `;

            return formattedHtml;
        }
    </script>

    <footer>
        <p>我将在以下平台发布最新内容，欢迎订阅、点赞和关注，一起探索AI技术：</p>
        <p>哔哩哔哩：<a href="https://space.bilibili.com/493820858" target="_blank" style="color: #00a1d6;">B站主页</a></p>
        <p>YouTube频道：<a href="https://www.youtube.com/channel/UCSrCCPbtqpfobsC0uThogQA?sub_confirmation=1" target="_blank" style="color: red;">订阅YouTube</a></p>
        <p>微信（WeChat）：GuoDaYe_Cunkou</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
